<template>
  <div class="search">
   <div class="search-box-wrapper">
     <search-box ref="searchBox" @query='onQueryChange'></search-box>
   </div>
   <div class="shortcut-wrapper" v-show="!query">
     <scroll class="shortcut" ref="shortcut" :data='searchAndHotKey'>
      <div>
       <div class="hot-key">
         <h1 class="title">热门搜索</h1>
         <ul>
           <li 
            class='item' 
            v-for="(item,index) of hotKey" 
            :key="index"
            @click="addQuery(item.k)"
           >{{item.k}}</li>
         </ul>
       </div>
       <div class="search-history" v-show="searchHistory.length">
         <div class="title">
           <div class="text">搜索历史</div>
           <div class="clear" @click="delConfirm">
             <div class="icon-clear"></div>
           </div>
         </div>
        <search-list 
          :searches='searchHistory'
          @delItem='delItem'
          @clickItem="clickItem"
        ></search-list>
       </div>
      </div>
     </scroll>
   </div>
   <div class="search-result" v-show="query">
     <suggest :query='query' @listScroll='blurInput' @select="saveHistory"></suggest>
   </div>
   <confirm ref='confirm' @clearAll='delAll'></confirm>
   <router-view></router-view>
  </div>
</template>

<script type="text/ecmascript-6">
import SearchBox from 'base/search-box/search-box'
import {getHotkey} from 'api/search'
import {ERR_OK} from 'api/config'
import Suggest from '../suggest/suggest'
import SearchList from 'base/search-list/search-list'
import { mapActions, mapGetters } from 'vuex'
import Confirm from 'base/confirm/confirm'
import Scroll from 'base/scroll/scroll'
import {searchMixin} from 'common/js/mixin'

export default {
  mixins: [searchMixin],
  components: {
     SearchBox,
     Suggest,
     SearchList,
     Confirm,
     Scroll
   },
   created() {
     this._getHotkey();
   },
   data() {
     return {
       hotKey: [] 
     }
   },
   methods: {
     _getHotkey(){
       // 来 10条hot数据 存在 hotkey里
       getHotkey().then(res=> {
         if(res.code===ERR_OK){
          this.hotKey=res.data.hotkey.slice(0,10)
         }
       })
     },
     // 把点击的热门数据 传给search-box 显示在输入框中
     
     ...mapActions([
       
       'delAllSearchHistory'
     ]),
     // 点击时显示在 input框
     clickItem(item) {
       this.addQuery(item)
     },
     // 删除
     delItem(item) {
       this.delOneSearchHistory(item)
     },
    //  删除所有历史 
    delConfirm(){
      this.$refs.confirm.show()
    },
    delAll() {
       this.delAllSearchHistory()
     }
   },
   computed: {
     ...mapGetters([
       'searchHistory'
     ]),
     searchAndHotKey(){
       return this.searchHistory.concat(this.hotkey)
     }
   },
   watch: {
     query(newVal) {
      if(!newVal){
        setTimeout(()=>{
          this.$refs.shortcut.refresh()
        },20)
      }
       
     }
   },
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  @import "~common/stylus/mixin"

  .search
    .search-box-wrapper
      margin: 20px
    .shortcut-wrapper
      position: fixed
      top: 178px
      bottom: 0
      width: 100%
      .shortcut
        height: 100%
        overflow: hidden
        .hot-key
          margin: 0 20px 20px 20px
          .title
            margin-bottom: 20px
            font-size: $font-size-medium
            color: $color-text-l
          .item
            display: inline-block
            padding: 5px 10px
            margin: 0 20px 10px 0
            border-radius: 6px
            background: $color-highlight-background
            font-size: $font-size-medium
            color: $color-text-d
        .search-history
          position: relative
          margin: 0 20px
          .title
            display: flex
            align-items: center
            height: 40px
            font-size: $font-size-medium
            color: $color-text-l
            .text
              flex: 1
            .clear
              extend-click()
              .icon-clear
                font-size: $font-size-medium
                color: $color-text-d
    .search-result
      position: fixed
      width: 100%
      top: 178px
      bottom: 0
</style>